<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="mask_login" v-if="!token" @click="login = true"></view>

		<view class="personInfo">
			<!-- 用户信息 -->
			<view class="infoWrap">
				<view class="left">
					<image class="avatar" @click="utlis.goUrl(`/pages/mine/setInfo`)" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="info">
						<view class="head">
							<text class="name" @click="utlis.goUrl(`/pages/mine/setInfo`)">{{userInfo.username}}</text>
							<text @click="stewardShow = true">门店微信</text>
							<!-- <view class="right" v-if="userInfo.vip_id <= 1">
								<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zhuan.png" mode="">
								</image>
								<text>{{userInfo.vip.title || '-'}}</text>
							</view>
							<view class="right tourist" v-else>
								<text>散客</text>
							</view> -->
							<!-- <image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/06/-72x.png" mode="aspectFill"></image> -->
						</view>
						<view class="phone" @click="utlis.goUrl(`/pages/mine/setInfo`)">{{userInfo.phone || ''}}</view>
					</view>
				</view>
				<!-- <text class="iconfont icon-shezhi set" ></text> // 设置按钮 -->
			</view>
		</view>

		<!-- 会员卡 -->
		<view class="vipWrap" @click="utlis.goUrl(`/pages/mine/vipList`)">
			<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg5.png" mode=""></image>
		</view>

		<!-- nav菜单 -->
		<view class="navViewBox">
			<view class="navView">
				<view class="navView_left">
					<view class="navView_left-l" @click="goIntegral()">
						<view class="name">积分</view>
						<view class="dec">{{userInfo.integral || 0}} <text>个</text></view>
					</view>
					<view class="navView_left-r">
						<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xingxing2.png"></image>
					</view>
				</view>
				<view class="navView_right ">
					<view class="navView_right-l" @click="utlis.goUrl(`/pages/mine/rechargeList?type=0`)">
						<view class="name">会员卡余额</view>
						<view class="dec">{{userInfo.balance || 0}} <text>元</text></view>
					</view>
					<view class="navView_right-r">
						<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/qian.png"></image>
					</view>
				</view>
			</view>
			<view class="navView mt20">
				<view class="navView_left">
					<view class="navView_left-l" @click="utlis.goUrl(`/pages/mine/couponList`)">
						<view class="name">优惠券</view>
						<view class="dec">{{userInfo.coupon || 0}} <text>个</text></view>
					</view>
					<view class="navView_left-r">
						<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zise.png"></image>
					</view>
				</view>
				<!-- /pages/mine/membership -->
				<view class="navView_right " @click="utlis.goUrl(`/pages/mine/haveVipList`)">
					<view class="navView_right-l">
						<view class="name">会员卡</view>
						<view class="dec">{{userInfo.user_vip_count}}<text>个</text></view>
					</view>
					<view class="navView_right-r">
						<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/erweima.png"></image>
					</view>
				</view>
			</view>
			<view class="navView mt20">
				<view class="navView_left">
					<view class="navView_left-l" @click="utlis.goUrl(`/pages/mine/rechargeList?type=1`)">
						<view class="name">平台会员卡余额</view>
						<view class="dec">{{userInfo.sys_balance || 0}} <text>元</text></view>
					</view>
					<view class="navView_left-r">
						<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/qian.png"></image>
					</view>
				</view>
				<view class="navView_right">
					<!-- <view class="navView_left-l" @click="utlis.goUrl(`/pages/mine/couponList`)">
						<view class="name">平台会员卡余额</view>
						<view class="dec">{{userInfo.sys_balancef || 0}} <text>个</text></view>
					</view>
					<view class="navView_left-r">
						<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zise.png"></image>
					</view> -->
				</view>
			</view>
		</view>


		<!-- 我的订单 -->
		<view class="myOrder">
			<view class="head">
				<text class="t1">我的订单</text>
				<view class="right" @click="utlis.goUrl(`/pages/order/orderList`)">
					<text class="t2">全部订单</text>
					<text class="iconfont icon-a-arrowbeifen6"></text>
				</view>
			</view>
			<view class="group">
				<view class="list" v-for="(ele,index) in statusList" :key="index" @click="goUrl(ele)">
					<image :src="ele.icon" mode="aspectFill"></image>
					<view class="names">{{ele.name}}</view>
				</view>
			</view>
		</view>

		<!-- 更多功能 -->
		<view class="myOrder">
			<view class="head">
				<text class="t1">更多功能</text>
			</view>
			<view class="group">
				<view class="list" v-for="(ele,index) in moreList" :key="index" @click="goUrl(ele)">
					<image :src="ele.icon" mode="aspectFill"></image>
					<view class="names">{{ele.name}}</view>
				</view>
			</view>
		</view>



		<!-- 分类列别 -->
		<view class="groupList">
			<view class="list" v-for="(ele,index) in list" :key="index" v-if="!ele.islogin" @click="navList(ele.url,index)">
				<view class="left">
					<text class="t1 iconfont" :class="ele.icon"></text>
					<text class="title">{{ele.title}}</text>
				</view>
				<view class="right">
					<text class="num" v-if="ele.num && userInfo.message_count">{{userInfo.message_count}}</text>
					<text class="iconfont icon-a-arrowbeifen3"></text>
				</view>
			</view>
		</view>
		
		
		<!-- <u-modal v-model="isPhoneAuth" :content="'您还未绑定手机号,请先绑定手机号'">
			<view slot="confirm-button">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="wxlogin">
					绑定
				</button>
			</view>
		</u-modal>
		<u-modal v-model="login" show-cancel-button :content="'您还未登陆,请登录'">
			<view slot="confirm-button">
				<button @click="getuserinfo" class="wxlogin">
					登录
				</button>
			</view>
		</u-modal> -->
		
		<!-- 兼容快手小程序写法 -->
		<u-popup v-model="isPhoneAuth" mode="center" border-radius="20" width="400rpx">
			<view class="loginPop">
				<view class="loginPop-title">您还未绑定手机号,请先绑定手机号</view>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="wxlogin">
					绑定
				</button>
			</view>
		</u-popup>
		
		<!-- 兼容快手小程序写法 -->
		<u-popup v-model="login" mode="center" border-radius="20" width="400rpx">
			<view class="loginPop">
				<view class="loginPop-title">您还未登陆,请登录</view>
				<view class="loginPop-main">
					<view class="loginPop-main-close" @click="login = false">取消</view>
					<button @click="getuserinfo" class="wxlogin">
						登录
					</button>
				</view>
			</view>
		</u-popup>
		
		
		<!-- 加盟按钮 -->
		<view class="league" @click="plFun()" v-if="userInfo.is_staff < 1">
			<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/league.png"></image>
		</view>
		
		<!-- 管家微信 -->
		<u-popup v-model="stewardShow" mode="center">
			<image class="stewardImg" :src="toStore.qr_code" alt="加载失败"></image>
		</u-popup>
		
		<!-- 加盟认证弹窗 -->
		<authentication :show="authenticationShow" @clickHandle="authenticationHandle"></authentication>
	</view>
</template>
<script>
	import { mapActions } from 'vuex'
	import authentication from '@/components/pop/authentication.vue'
	export default {
		components:{
			authentication
		},
		data() {
			return {
				stewardShow: false,
				loginInfo: {
					code: '',
					iv: '',
					encryptedData: '',
					store_id: '',
					share_user_id: '',
					encryptedDataPhone: '',
					ivPhone: ''
				},
				couponLength: '',
				isPhoneAuth: false,
				login: false,
				statusList: [{
						name: '待付款',
						icon: '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/time24.png',
						url: '/pages/order/orderList?status=1'
					},
					{
						name: '待消费',
						icon: '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/time22.png',
						url: '/pages/order/orderList?status=10'
					},
					{
						name: '待评价',
						icon: '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xiaoxi22.png',
						url: '/pages/evaluatedList/index'
					},
					{
						name: '已评价',
						icon: '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zan22.png',
						url: '/pages/mine/evaluationList'
					},
				],
				moreList: [{
					name: '使用次数',
					icon: '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/time23.png',
					url: '/pages/mine/numberUse'
				}, {
					name: '邀请好友',
					icon: '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/qian22.png',
					url: '/pages/mine/inviteFriends'
				}, {
					name: '订单物流',
					icon: '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/wuliu.png',
					url: '/pages/mine/logistics'
				}, {
					name: '积分中心',
					icon: '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/gitf.png',
					url: '/pages/mine/integral'
				}],
				list: [
					{
						title: '消费记录',
						icon: 'icon-rili',
						url: '/pages/mine/expensesRecord'
					},
					{
						title: '介绍客户消费情况',
						icon: 'icon-fenxiang',
						url: '/pages/mine/introduction'
					},
					{
						title: '收货地址',
						icon: 'icon-a-dingwei1',
						url: '/pages/mine/take/index'
					},
					{
						title: '消息中心',
						icon: 'icon-taolunqubeifen',
						url: '/pages/mine/messageList',
						num: 4
					},
					{
						title: '分享记录',
						icon: 'icon-fenxiang',
						url: '/pages/mine/shareList'
					},
					{
						title: '投诉与建议',
						icon: 'icon-tubiao09',
						url: '/pages/mine/feedback'
					},
					{
						title: '协议管理',
						icon: 'icon-dianyingpiao',
						url: '/pages/mine/agreement'
					},
					{
						title: '联系我们',
						icon: 'icon-wenjuan',
						url: ''
					},
					{
						title: '退出登录',
						icon: 'icon-dianyingpiao', 
						url: '',
						islogin: 1
					},
					
					
					
					// {
					// 	title: '我的预约',
					// 	icon: 'icon-yuyue',
					// 	url: '/pages/myReserva/index'
					// },
					// {
					// 	title: '我的评价',
					// 	icon: 'icon-xiaoxi',
					// 	url: '/pages/mine/evaluationList'
					// },
					// {
					// 	title: '打赏记录',
					// 	icon: 'icon-wenjuan',
					// 	url: '/pages/mine/exceptionalRecord'
					// },
					// {
					// 	title: '发票管家',
					// 	icon: 'icon-dianyingpiao',
					// 	url: '/pages/mine/invoiceManager'
					// },
				],
				authenticationShow: false,
			}
		},
		async onLoad() {},
		onShow() {
			
			if (this.token) {
				this.getUserInfo()
				this.getCoupon()
			} else {
				this.login = true
			}
			if (!this.token && !this.store_id) {
				this.getStoreList()
			}
		},
		methods: {
			...mapActions(['getPhoneNumber', 'getuserinfo']),
			async getStoreList() {
				let {
					data,
					code
				} = await this.$u.api.getStore();
				let dates = data[0]
				let dates_id = dates.id
				this.$u.vuex("defaultAddress", dates)
				this.$u.vuex("store_id", dates_id)
				this.$u.vuex("makeStoreInfo", dates)
				this.$u.vuex("makeStore_id", dates_id)
				this.$u.vuex("toStore", dates)
				this.$u.vuex("toStore_id", dates_id)
			},
			authenticationHandle() {
				this.authenticationShow = false
			},
			plFun() {
				console.log(3434)
				this.authenticationShow = true
			},
			goIntegral() {
				this.utlis.goUrl("/pages/mine/integralDetails")
			},
			goUrl(ele) {
				this.utlis.goUrl(ele.url)
			},
			async navList(url, index) {
				if(index==7){
					let {data,code} = await this.$u.api.agreement();
					
					wx.makePhoneCall({
						phoneNumber: data.customer, //仅为示例，并非真实的电话号码
						success: function() {
							console.log("拨打电话成功！")
						}
					})
					return
				}
				if(index == 8){
					let {data,code} = await this.$u.api.agreement();
					
					// 清空应用缓存
					uni.clearStorageSync();
					// 或者异步版本
					uni.clearStorage();
					this.$u.vuex('token', "")
					this.$u.vuex('userInfo', {username: "点击登录"})
					uni.showToast({
						duration: 2000,
						title: '退出成功',
						icon: 'success'
					})
					return
				}
				this.utlis.goUrl(url)
			},
			async getCoupon(params) {
				let {
					data,
					code
				} = await this.$u.api.getCoupon({
					store_id: this.store_id,
					coupon_scope_use_id: 0
				});
				if (code) {
					this.couponLength = data.length
				}
			},
			// 授权手机号码
			async getPhoneNumber(e) {
				this.loginInfo.encryptedDataPhone = e.detail.encryptedData
				this.loginInfo.ivPhone = e.detail.iv
				if (e.detail.iv) {
					uni.login({
						success: async res => {
							let {
								code
							} = res
							this.loginInfo.code = res.code
							await this.wxLogin()
						}
					})
				}
			},
			// 授权用户信息
			async getuserinfo(e) {
				uni.showLoading({title: '登录中'});
				// 登录
				uni.login({
					success: res => {
						this.loginInfo.code = res.code
						this.isClick = true
					}
				})
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: async (res) => {
						let {
							iv,
							encryptedData
						} = res;
						this.loginInfo.iv = iv
						this.loginInfo.encryptedData = encryptedData
						this.loginInfo.share_user_id = this.share_user_id
						this.loginInfo.store_id = this.store_id
						this.loginInfo.fid = this.fid
						this.wxLogin()
					},
					fail: (res1) => {
						console.log(res1, '登录失败');
						this.isClick = false
					}
				})
			},
			// 登录
			async wxLogin() {
				let {
					data,
					code,
					msg
				} = await this.$u.api.wxLogin(this.loginInfo);
				uni.hideLoading()
				if (code) {
					this.login = false
					if (data.user_token) {
						this.$u.vuex('token', data.user_token)
						await this.getUserInfo()
						await this.getCoupon()
						setTimeout(() => {
							uni.showToast({
								duration: 2000,
								title: '登录成功',
								icon: 'success'
							})
						}, 500)
					} else {
						this.isPhoneAuth = true
					}
				} else {
					this.isClick = false
				}
			},
			// 获取用户信息
			async getUserInfo() {
				let {
					data,
					code
				} = await this.$u.api.userInfo({
					store_id: this.store_id
				});
				if (code) {
					this.$u.vuex('userInfo', data)
					console.log('userinfo-----', data)
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 100%;
		padding: 40rpx 32rpx 50rpx 32rpx;
		box-sizing: border-box;

		.mask_login {
			position: fixed;
			width: 100%;
			height: 100vh;
			top: 0;
			left: 0;
			bottom: 0;
			opacity: 0;
			z-index: 9999;
		}

		.personInfo {
			width: 100%;
			box-sizing: border-box;
			// padding: 36rpx 34rpx 33rpx 35rpx;
			// background: #ffffff;
			border-radius: 8rpx;
			margin-top: 150rpx;

			.infoWrap {
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.left {
					display: flex;
					align-items: center;

					.info {
						.head {
							display: flex;
							align-items: center;
							margin-bottom: 13rpx;

							.name {
								font-size: 40rpx;
								font-weight: 500;
								color: #333333;
								margin-right: 14rpx;
							}

							.right {
								width: 87rpx;
								height: 27rpx;
								line-height: 27rpx;
								background: linear-gradient(209deg, #d1b87d 3%, #f2e4a2 57%, #d1b87d 100%);
								border-radius: 4rpx;
								position: relative;
								font-size: 14rpx;
								color: #604007;

								text {
									position: absolute;
									left: 28rpx;
									// margin-left: 100rpx;
								}

								image {
									width: 19rpx;
									height: 19rpx;
									position: absolute;
									left: 6rpx;
									top: 50%;
									transform: translateY(-50%);
								}
							}

							>image {
								width: 87rpx;
								height: 27rpx;
							}
						}

						.phone {
							font-size: 26rpx;
							color: #4D5562;
						}
					}

					.avatar {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						margin-right: 18rpx;
					}
				}

				.set {
					color: #999;
					font-size: 40rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
			}

			.group {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				margin-top: 64rpx;

				text {
					color: #007664;
					font-size: 32rpx;
					line-height: 45rpx;
					margin-bottom: 15rpx;
					font-weight: 500;
				}

				view {
					color: #666666;
					font-size: 24rpx;
					line-height: 32px;
				}

				image {
					width: 61rpx;
					height: 61rpx;
					display: inline-block;
					text-align: center;
				}
			}
		}

		.vipWrap {
			margin: 30rpx 0 0rpx 0;
			width: 686rpx;
			height: 162rpx;
			border-radius: 8rpx;
			position: relative;

			>image {
				width: 686rpx;
				height: 130rpx;
				position: absolute;
				top: 0;
			}

			.vipTxt {
				width: 688rpx;
				height: 162rpx;
				position: absolute;
				top: 0;
				z-index: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 53rpx 30rpx 53rpx 25rpx;
				color: #FFFFFF;
				font-size: 32rpx;

				.dredge {
					display: block;
					width: 144rpx;
					height: 56rpx;
					line-height: 56rpx;
					background: #007664;
					border-radius: 6rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
				}
			}
		}

		.myOrder {
			padding: 34rpx 33rpx 27rpx 34rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			margin-bottom: 24rpx;

			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #EDEDED;

				.t1 {
					font-size: 28rpx;
					color: #242833;
				}

				.right {
					display: flex;
					align-items: center;
					color: #999999;

					.t2 {
						font-size: 24rpx;
						margin-right: 8rpx;
					}

					.icon-a-arrowbeifen6 {
						font-size: 32rpx;
					}
				}
			}

			.group {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 15rpx;

				.list {
					font-size: 26rpx;
					text-align: center;
					color: #303133;
					line-height: 37rpx;

					image {
						width: 70rpx;
						height: 70rpx;
						margin-bottom: 12rpx;
					}

					.names {
						color: #4D5562;
						font-size: 24rpx;
					}
				}
			}
		}

		.groupList {
			width: 686rpx;
			background: #ffffff;
			border-radius: 8rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-bottom: 92rpx;

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 96rpx;
				border-bottom: 1rpx solid rgba(142, 142, 142, .24);

				.left {
					display: flex;
					align-items: center;

					.t1 {
						color: #50DCC2;
						font-size: 38rpx;
						margin-right: 26rpx;
					}

					.title {
						color: #333333;
						font-size: 26rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;

					.num {
						display: block;
						width: 34rpx;
						height: 34rpx;
						background: #007664;
						border-radius: 50%;
						margin-right: 18rpx;
						color: #FFFFFF;
						font-size: 24rpx;
						text-align: center;
					}

					.icon-a-arrowbeifen3 {
						font-size: 32rpx;
						color: #000000;
					}
				}
			}

			.list:last-child {
				border: none;
			}
		}

		.navViewBox {
			width: 100%;
			// height: 185rpx;
			border-radius: 16rpx;
			background-color: white;
			padding: 32rpx;
			margin-bottom: 24rpx;
		}

		.mt20 {
			margin-top: 40rpx;
		}

		.navView {
			width: 100%;
			display: flex;

			&_left {
				display: flex;
				flex: 1;
				height: 67rpx;
				// border: 1rpx solid red;
				position: relative;

				&-l {
					.name {
						color: #19181D;
						font-size: 24rpx;
					}

					.dec {
						color: #333333;
						font-size: 32rpx;

						text {
							color: #4D5562;
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}
				}

				&-r {
					image {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						right: 30rpx;
						top: 6rpx;
					}
				}
			}

			&_right {
				display: flex;
				flex: 0.88;
				height: 67rpx;
				// border: 1rpx solid red;
				border-left: 1rpx dashed #EDEDED;
				position: relative;
				padding-left: 30rpx;

				&-l {
					.name {
						color: #19181D;
						font-size: 24rpx;
					}

					.dec {
						color: #333333;
						font-size: 32rpx;

						text {
							color: #4D5562;
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}
				}

				&-r {
					image {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						right: 0rpx;
						top: 6rpx;
					}
				}
			}
		}
	}
	.league{
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
		image{
			width: 110rpx;
			height: 110rpx;
		}
	}
	.tourist {
		padding: 0 !important;
		text-align: center;
		width: 60rpx !important;

		text {
			left: 20rpx !important;
		}
	}
	.stewardImg{
		width: 400rpx;
		height: 400rpx;
	}
</style>
<style>
	page {
		background: #F6F7FA
	}
</style>